import Vue from 'vue'
import * as globals from '../global/index'
var vue = new Vue();
const weather_api= {
    addBaotouRegionAndPointSource: function (map,region,weatherType) {
        var that = this;
        var regionName= region.name
        var regionColor = region.color
        var loc = `${globals.WEATHER_DATA_LOC_HEAD}${regionName}_administrate.json`
        $.get(loc, function (data) {
            var dataCollection = that.administrativeDataWrapper(data.data,weatherType)
            map.addSource(`${regionName}_administrate_line_source`, {
                "type": "geojson",
                "data": dataCollection[0]
            });
            var source = {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": data.center
                    },
                    "properties": {
                        "name": data.name,
                        "center": data.center,
                        "iconType": weatherType,
                    }
                }]
            }
            if(regionName == "baotou"){
                map.addSource(`${regionName}_administrate_point_source`, {
                    "type": "geojson",
                    "data": source
                });
            }else {
                map.addSource(`${regionName}_administrate_point_source`, {
                    "type": "geojson",
                    "data": dataCollection[1]
                });
            }
            map.addSource(`${regionName}_administrate_polygon_source`, {
                "type": "geojson",
                "data": dataCollection[2]
            });
            that.addBaotouRegionAndPointLayer(map,regionName,weatherType,regionColor);
        });
    },

    addBaotouRegionAndPointLayer: function (map,regionName,weatherType,color) {
        map.addLayer({
            "id": `${regionName}_administrate_polygon_layer`,
            "type": "fill",
            "source": `${regionName}_administrate_polygon_source`,
            "minzoom": 0,
            "maxzoom": 16,
            "paint": {
                "fill-opacity":0.8,
                "fill-color": color,
            }
        });

        map.addLayer({
            "id": `${regionName}_administrate_point_layer`,
            "type": "symbol",
            "source": `${regionName}_administrate_point_source`,
            "minzoom": 0,
            "maxzoom": 16,
            "layout": {
                // "icon-image": "marker-15-5",
                "icon-image": "{iconType}",
                "text-field": "{name}",
                "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                "text-offset": [0, 2.6],
                "text-anchor": "bottom"
            },
            "paint": {
                "icon-color": "red",
                "text-color":"#333333"
            }
        });
    },
    administrativeDataWrapper: function (datas,weatherType) {
        var _out = {
            "type": "FeatureCollection",
            "features": []
        }
        var _out_point = {
            "type": "FeatureCollection",
            "features": []
        }
        var _out_polygon = {
            "type": "FeatureCollection",
            "features": []
        }
        for (var i = 0; i < datas.length; i++) {
            var data = datas[i];
            var item = {
                "type": "Feature",
                "geometry": {
                    "type": "LineString",
                    "coordinates": data.data
                },
                "properties": {
                    "name": data.name,
                    "center": data.center
                }
            }
            var item1 = {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": data.center
                },
                "properties": {
                    "name": data.name,
                    "center": data.center,
                    "iconType": weatherType,
                }
            }
            var item2 = {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [data.data]
                },
                "properties": {
                    "name": data.name,
                    "center": data.center
                }
            }
            _out.features.push(item);
            _out_point.features.push(item1);
            _out_polygon.features.push(item2);
        }
        return [_out, _out_point,_out_polygon];
    },

}


export default weather_api